<template>
	<view class="content">
		<view class="page-section page-section-gap">
			<!-- 将地图进行呈现 -->
			<view style="width: 100%; height: 260px;border-radius: 20px;">
				<map style="width: 100%; height: 100%;" :latitude="addressInfo.latitude" :longitude="addressInfo.longitude" :markers="covers"></map>
			</view>
			<!-- 显示当前位置 -->
			<view style="height:30px;line-height:35px;position:absolute;top:30%;left:7%;background-color: #FFFFFF;border-radius: 15px;padding: 0 3%;font-size: 14px;">
				当前位置：<span>{{addressInfo.addressName}}</span>
			</view>
			<view class="tabs">
				<!-- 显示图片 -->
				<view style="float: left; width: 12%;margin-top: 5px;"><image style="width: 30px;height: 30px;" src="../../static/leftLocation.png" ></image></view>
				<!-- 显示定位 -->
				<view style="float: left;line-height: 40px;width: 40%;">系统定位</view>
				<!-- 显示图片 -->
				<view style="float: left;width: 12%;margin-top: 5px;"><image style="width: 30px;height: 30px;" src="../../static/Search.png" ></image></view>
				<!-- 显示定位 -->
				<view style="float: left;line-height: 40px;width: 30%;">手动输入</view>
			</view>
			<input class="uni-input" maxlength="10" placeholder="Title" v-model="addressInfo.title" />
			
			<textarea class="uni-textarea" placeholder="Say something" v-model="addressInfo.content"/>

			<yu-datetime-picker
			    ref="dateTime"
			    startYear="2015"
			    value="2019-11-10 08:30:01"
			    :isAll="false"
			    :current="false"
			    @confirm="onConfirm">
			    </yu-datetime-picker>
			<view style="text-align: center;border:1px solid #CCCCCC;height: 40px;line-height: 40px;border-radius: 20px;" @tap="toggleTab()">{{addressInfo.time | dateFilter}}</view>  
			<yu-datetime-picker @confirm="onConfirm" startYear="2015" ref="dateTime" value="2019-11-10 08:30:01" :isAll="false" :current="false"></yu-datetime-picker>

			<view style="text-align: center;border:1px solid #CCCCCC;height: 40px;line-height: 40px;border-radius: 20px;" @click="choiseAddress">
				{{addressInfo.address|addressFilter}}
			</view>
			<ehPicker @conceal="conceal" v-if="popup" />

			<!-- 插入图片 -->
			<easy-upload
			        :dataList="dataList" 
			        uploadUrl="https://xunji.xmxland.space/upload" 
			        deleteUrl='https://xunji.xmxland.space/upload' 
			        :types="types"
			        @successImage="successImage" 
			        @successVideo="successvideo"
			    />
			<button type="primary" style="background-color: #4CD964;" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import easyUpload from '@/components/easy-upload/easy-upload.vue'
	import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
	import ehPicker from '@/components/erha-picker/erha-picker.vue'; 
	export default {
		components: {
		     yuDatetimePicker,
			 easyUpload,
			 ehPicker,
		    },
		data() {
			return {
				id:0, // 使用 marker点击事件 需要填写id
				// 位置的覆盖点
				covers: [{
					latitude: 26.036979,
					longitude: 119.216479,
					iconPath: '../../static/location.png'
				}],
				dataList: [],
				types: 'image',
				popup:false,
				addressInfo:{
					title:'',
					content:'',
					time:'',
					address:'未定位',
					latitude: 26.036979,
					longitude: 119.216479,
					file:[],
				}
			}
		},
		onLoad() {
			uni.getLocation({
			    success: function (res) {
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
			    }
			});
		},
		// 保存的方法
		methods: {
			save(){
				uni.request({
				    url: 'https://xunji.xmxland.space/save',
					"headers": {
						"Content-type": "application/x-www-form-urlencoded",
					},
					method:'POST',
				    data: this.addressInfo,
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			},
			getAddress(){
				uni.getLocation({
				    success: function (res) {
						this.addressInfo.lat = res.address.latitude
						this.addressInfo.lon = res.address.longitude
						this.addressInfo.address = res.address.country
				    }
				});
			},
			toggleTab(item, index) {  
			    this.$refs.dateTime.show();  
			},  
			onConfirm(val) {  
				this.addressInfo.time = val.selectRes
			},
			choiseAddress(){
				this.popup = true;
			},
			conceal(param) {
				this.addressInfo.address = param.province+param.city+param.area+param.street
				this.popup = false;
			},
			//返回的圖片地址
			successImage(data){
				if(data.statusCode === 200){
					this.addressInfo.file.push(data.data)
				}
			},
			//返回的視頻地址
			successvideo(data){
				if(data.statusCode === 200){
					this.addressInfo.file.push(data.data)
				}
			}
		},
		filters:{
			dateFilter(value){
				if(value===''){
					return '请选择日期'
				}else{
					return value
				}
			},
			addressFilter(value){
				if(value==='未定位'){
					return '请选择地点'
				}else{
					return value
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 90%;
		height: 30%;
		padding:0 5%;
	}
	.tabs{
		 border: 1px solid #CCCCCC;
		 margin-top: 10px;
		 height: 40px;
		 border-radius: 10px;
		 padding-left: 5%;
	}
	.uni-input{
		width:100%;
		height: 40px;
		margin-top: 10px;
		border-radius: 10px;
		box-shadow: 0px 4px 0px #EEEEEE;
		border: 1px solid #CCCCCC;
	}
	.uni-textarea{
		width:100%;
		height: 150px;
		margin-top: 20px;
		border-radius: 10px;
		box-shadow: 0px 4px 0px #EEEEEE;
		border: 1px solid #CCCCCC;
	}


</style>
